<template>
	<view class="page">
		<view class="sider">
			<SideBarWeeks v-model="menuDate" @pick="onPickDate"></SideBarWeeks>
		</view>

		<view class="content">
			<view class="content-date">
				<text>{{ menuDate }}</text>
			</view>

			<view class="content-dish-wrapper">
				<DishCard
					v-for="item in dishesList"
					:key="item.id"
					:data="item"
					:swipe="userStore.role === 'admin'"
					@edit="onEditDishes"
					@delete="onDeleteDishes"
				>
					<button
						v-if="userStore.normalAdmin && showRateButton && !item.isScored"
						class="card-btn"
						plain="true"
						type="primary"
						size="mini"
						@tap="onRate(item.id)"
					>
						打分
					</button>
				</DishCard>
			</view>

			<view v-if="userStore.admin" class="content-options">
				<wd-button type="success" @tap="onCreateDishes">创建菜品</wd-button>
				<view class="content-options-gap"></view>
				<wd-button @tap="onSetMenu">修改菜单</wd-button>
			</view>
		</view>

		<wd-message-box selector="wd-message-box-slot">
			<wd-rate custom-class="custom-rate-class" v-model="rate" />
		</wd-message-box>
	</view>
</template>

<script setup>
import { computed, ref } from 'vue';
import dayjs from 'dayjs';

import { useUserStore } from '../../stores/useUserStore.js';
import { useController } from './index.contorller.js';
import { useMessage } from '@/uni_modules/wot-design-uni';
import { showConfirmDialog, showDialog } from '../../hooks/useConfirm.js';
import { showSuccessToast } from '../../utils/toast.utils.js';

const message = useMessage('wd-message-box-slot');

const { dishesList, menuDate, ...ctl } = useController();
const userStore = useUserStore();
const rate = ref(5);
const today = dayjs().format('YYYY-MM-DD');
const showRateButton = computed(() => {
	return menuDate.value === today;
});

// 查看菜单
const onPickDate = (date) => {
	console.log('date', date);
	ctl.getMenuDishes();
};

// 打分
function onRate(dishId) {
	console.log('dishId', dishId);
	message
		.confirm({
			title: '评分',
		})
		.then(async () => {
			await ctl.rateDishesById(rate.value, dishId);
			// showConfirmDialog({ title: '成功', content: '打分成功' });
			await ctl.getMenuDishes();
			showSuccessToast();
		})
		.catch((error) => {
			console.log(error);
		});
}

// 修改菜品
const onEditDishes = (date) => {
	console.log('onEditDishes', date);
	uni.navigateTo({
		url: '/pages/update-dishes/update-dishes' + `?id=${date.id}`,
	});
};

// 删除菜品
const onDeleteDishes = async (dishes) => {
	console.log('onDeleteDishes', dishes);
	const confirm = await showDialog({ title: '删除', content: `确定删除"${dishes.name}"吗？` });
	if (!confirm) return;

	await ctl.deleteDishes(dishes.id);
	showConfirmDialog({ title: '成功', content: `删除"${dishes.name}"成功` });
	ctl.getMenuDishes();
};

// 创建菜品
const onCreateDishes = () => {
	uni.navigateTo({
		url: '/pages/create-dishes/create-dishes',
	});
};

// 设置菜单
const onSetMenu = () => {
	uni.navigateTo({
		url: '/pages/set-menu/set-menu' + `?date=${menuDate.value}`,
	});
};
</script>

<style scoped>
.page {
	display: flex;
	/* align-items: center; */
	/* justify-content: center; */
	/* background-color: pink; */

	height: 100%;
	width: 100%;
}

.sider {
	background-color: #f8f8f8;
}

.content {
	flex: 1;
	/* padding: 12rpx 0; */
	overflow: auto;
}

.content-date {
	padding: 12rpx;
	color: #444;
	font-weight: bold;
}

.content-options {
	display: flex;
	flex-direction: column;

	padding: 32rpx;
}

.content-options-gap {
	height: 32rpx;
}
</style>
